<template>
  <div class="form-container">
    <h1>医疗数据预测</h1>
    <el-form :model="form" label-width="120px">
      <el-form-item label="性别">
        <el-select v-model="form.gender" placeholder="请选择">
          <el-option label="男" value="Male"></el-option>
          <el-option label="女" value="Female"></el-option>
          <el-option label="其他" value="Other"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="年龄">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>

      <el-form-item label="高血压">
        <el-radio-group v-model="form.hypertension">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="心脏病">
        <el-radio-group v-model="form.heard_disease">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="婚否">
        <el-radio-group v-model="form.ever_married">
          <el-radio label="No">否</el-radio>
          <el-radio label="Yes">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="工作类型">
        <el-select v-model="form.work_type" placeholder="请选择">
          <el-option label="童工" value="children"></el-option>
          <el-option label="公务员" value="Govt_job"></el-option>
          <el-option label="未工作" value="Never_worked"></el-option>
          <el-option label="自营职业" value="Self-employed"></el-option>
          <el-option label="私营职业" value="Private"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="住宅类型">
        <el-radio-group v-model="form.residence_type">
          <el-radio label="Rural">农村</el-radio>
          <el-radio label="Urban">城市</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="平均葡萄糖水平">
        <el-input type="number" v-model.number="form.avg_glucose_level"></el-input>
      </el-form-item>

      <el-form-item label="体重指数">
        <el-input v-model.number="form.bmi"></el-input>
      </el-form-item>
      
      <el-form-item label="吸烟史">
        <el-select v-model="form.smoking_status" placeholder="请选择">
          <el-option label="以前吸烟过" value="formerly smoked"></el-option>
          <el-option label="从未吸烟" value="never smoked"></el-option>
          <el-option label="吸烟" value="smokes"></el-option>
          <el-option label="未知" value="Unknown"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模型选择">
        <el-select v-model="form.mode" placeholder="请选择">
          <el-option label="逻辑回归" value="lg"></el-option>
          <el-option label="决策树" value="dt"></el-option>
          <el-option label="KNN" value="knn"></el-option>
          <el-option label="贝叶斯" value="by"></el-option>
          <el-option label="支持向量机" value="svn"></el-option>
          <el-option label="随机森林" value="rf"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="predict">预测</el-button>
      </el-form-item>
    </el-form>

    <div>
      <span>预测结果</span>
      <span v-if="res === 1" style="color: red">{{ this.predictionResult }}</span>
      <span v-else-if="res === 0" style="color: blue">{{ this.predictionResult }}</span>
    </div>
  </div>
</template>

<script>
import { EventBus } from '../EventBus'; // 确保路径正确

export default {
  data() {
    return {
      testFormData:{
        name: ''
      },
      form: {
        gender: '',
        age: 18,
        hypertension: 2,
        heart_disease: 2,
        ever_married: '',
        work_type: '',
        residence_type: '',
        avg_glucose_level: 0,
        bmi: 0,
        smoking_status: '',
        mode: ''
      },
      dialogVisible: false,
      alertVisible: false,
      predictionResult: '',
      res: 2
    };
  },
  methods: {
    predict() {
      console.log(this.form)
      console.log(typeof this.form.avg_glucose_level); // 应该输出 "number"
      console.log(typeof this.form.bmi); // 应该输出 "number"


      this.$http({
        method: 'post',
        url: '/healthpredict',
        data: this.form
      })
        .then(response => {
          if (response.data.code == 200){
            this.res = response.data.data
            this.predictionResult = response.data.msg
          }
        })
        .catch(error => {
          console.log(error.message)
        })
    }
  }
}
</script>

<style scoped>
/* 你的样式 */
</style>